<script setup lang="ts">
import router from "@/router";
import { getTopIndustrialList, getIndustrialInfo } from "@/network/api";
import pageTop from "@/components/pageTop.vue";
import { ref, onMounted, reactive, computed,nextTick  } from "vue";
import * as echarts from 'echarts';
const bannerList = ref() as any;
const menuList = ref() as any;
let platformData = reactive({
  count: 0,
  list: [] as any,
  page: 1,
  pageSize: 10,
});


const gutter = computed(() => { 
  const width = document.documentElement.clientWidth;
      if (width < 768) {
        return 0 // 小于768px时，双倍间隔
      } 
      return 60 // 大于1200px 时，四倍间隔
})

const Data = reactive({
  category_id: Number,
  keywords: "",
  page: 1,
  pageSize: 10,
  activation: 1,
  industryInfo: {} as any,
  industryList: [] as any,
  videoName: '',
  industryData: [
  ],
  value: 1,
});

const menuItem = (item: any) => {
  Data.activation = item.id;
  Data.videoName = item.name
  getIndustrialInfo({
    industrial_id: item.id
  }).then(res => {
    console.log(res);
    Data.industryInfo = res.data


    if(!res.data.values.label.length){return}

    nextTick(()=>{
      

    const chartInstance = echarts.init(chartContainer.value);

    const option = {
      // ECharts 配置项
      tooltip: {
        show: false
      },
      xAxis: {
        data: res.data.values.label
      },
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '8%',
        containLabel: true
      },
      yAxis: {},
      series: [{
        name: '',
        type: 'bar',
        data: res.data.values.value,
        itemStyle: {
          // 设置柱状图的颜色
          color: '#085dde'
        }
      }]
    };
    chartInstance.setOption(option);
  })

  })
};
const handleCompany = (val: number, type: any) => {
  router.push({
    path: "/companyData",
    query: {
      id: val,
      carouselType: type,
    },
  });
};

const industryClick = (item: any) => {
  router.push({
    path: "/industryList",
    query: {
      id: Data.activation,
      sonID: item.id
    },
  });
}



const chartContainer = ref(null);
onMounted(() => {
  getTopIndustrialList().then(res => {
    console.log(res, 'res');
    Data.industryList = res.data
    Data.activation = res.data[0].id
    Data.videoName = res.data[0].name
    menuItem(res.data[0])
  })
});
</script>

<template>
  <pageTop :name="'产业集群'" :text="'产业链上下游企业汇聚，共筑产业生态圈'"></pageTop>

  <div class="bgfff">
    <div class="content">
      <div class="contentText">
        <div class="describe">
          <div class="textTop">
            基地紧紧围绕惠州市构建“2+1”现代产业的部署及“3+7”产业园区新格局，始终践行高新技术产业化道路，立足电子信息优势产业基础，全力打造以智能终端、超高清视频显示、能源电子、人工智能、激光与增材制造等5大制造业与现代服务业融合发展的“5+1”现代产业体系，形成了强大的生产制造能力和完善的配套产业链。
          </div>
        </div>
      </div>

      <el-row v-if="Data.industryList.length">
        <el-col :span="4" :xs="0" v-for="(item, index) in Data.industryList" @click="menuItem(item)">
          <div class="menuList flex flex_column align_center">
            <div class="menuListImg">
              <img :src="item.icon" alt="" />
            </div>
            <div :class="Data.activation == item.id ? 'menuListText' : ''" class="contentText">
              {{ item.name }}
            </div>
          </div>
        </el-col>
        <el-col :span="0" :xs="24">
          <div class="flex justify_center">
            <el-select @change="menuItem" v-model="Data.value" class="m-2" placeholder="Select" size="large">
              <el-option v-for="item in Data.industryList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="" v-if="Data.industryInfo.video">
    <div class="content companyBox flex flex_column align_center">
      <div class="bigTitle">
        <!-- {{ Data.industryData[Data.activation - 1].title }} -->
        {{ Data.videoName }}
      </div>
      <div class="companyImg scaleImgCard">
        <video :src="Data.industryInfo.video"></video>
      </div>
    </div>
  </div>

  <div class="bgfff">
    <div class="content text_center ">
      <div class="bigTitle">产业概况</div>
      <div class="contentText" style="margin: 33px 0;text-align: initial;">
        {{ Data.industryInfo.detail }}
      </div>
      <div class="module2Content">
        <div class="flex flex_wrap  width100 justify_between">
          <div class="cooperate parnterLogo" v-for="item in Data.industryInfo.sons" @click="industryClick(item)"
            :key="item">
            <div class="imgBox">
              <img :src="item.icon" alt="" class="parnterLogoImg" />
            </div>
            <div class="contentText">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="">
    <div class="content  flex flex_column align_center">
      <el-row class="width100" :gutter="gutter">
        <el-col :span="12" :xs="24">
          <el-row :gutter="20" class="brandImg">
            <el-col :span="8" v-for="item in Data.industryInfo.company" @click="handleCompany(item.id, true)">
              <div class="imgBox">
                <img v-if="item.logo" :src="item.logo" alt="" class="parnterLogoImg" />
                <div v-else style="height: 100%;display: flex;justify-content: center;align-items: center;font-size: 20px;background-color: #fff;">{{ item.alias }}</div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" :xs="24"  v-if="Data.industryInfo.values">
          <div id="myElement" v-if="Data.industryInfo.values.value.length" class="bgfff myElement" ref="chartContainer" >
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

  <div class="bgfff" v-if="Data.industryInfo.images && Data.industryInfo.images[0]">
    <div class="content text_center ">
      <div class="bigTitle">产业链全景图</div>

      <div class="imgScale" style="width: 892px;height: 502px;margin: 0 auto;">
        <img :src="Data.industryInfo.images[0]" alt="" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.bigTitle {
  margin-bottom: 80px;
}

::v-deep .el-input--large {
  width: 100%;
}

.cooperate {
  cursor: pointer;

  .imgBox {
    overflow: hidden;

    img {
      transition: all 0.5s;
    }
  }
}

.cooperate:hover {
  img {
    transform: scale(1.2);
  }
}

.brandImg {
  .imgBox {
    overflow: hidden;
    // width: 190px;
    height: 76px;
    border-radius: 10px;
    margin: 17px 0;
    cursor: pointer;

    img {
      flex: 1;
      transition: all 0.5s;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    img:hover {
      transform: scale(1.2);
    }
  }
}


.btn1 {
  font-size: 18px;
  color: #fff;
  height: 43px;
  width: 130px;
}

.content {
  margin: 0 auto;
  padding: 30px 0;
}

.describe {
  padding: 78px 65px 78px 65px;
  text-indent: 2em;

  .textTop {
    margin-bottom: 20px;
  }
}

.companyBox {
  width: 837px;

  .companyImg {
    width: 837px;
    height: 446px;
    object-fit: cover;
    border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .secondTitle {}

  .companyName {
    width: 100%;
    margin: 20px 0 27px 0;
    padding: 25px 84px 20px 84px;
    border-radius: 10px;

    .introduce {
      .introduceNumber {
        font-weight: bold;
        color: #085dde;
      }

      .introduceName {
        margin-top: 5px;
      }
    }
  }

  .industryText {
    text-indent: 2em;
    margin-bottom: 67px;
  }
}

.menuList {
  .menuListImg {
    width: 143px;
    height: 153px;
    margin-bottom: 23px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }
  }

  .menuListText {
    padding-bottom: 20px;
    border-bottom: 3px #085dde solid;
    color: #085dde;
  }
}

.imgScale {
  overflow: hidden;

  img {
    transition: all 0.5s;
    width: 100%;
    height: 100%;
  }
}


.imgScale:hover {
  img {
    transform: scale(1.2);
  }
}

.myElement {
  width: 600px; 
  height: 410px;
  margin: 17px 0;
}

@media screen and (max-width: 450px) {
  .myElement {
  width: 100%; 
  height: 250px;
}

  .companyBox {
    width: 100%;

    .companyImg {
      width: 100%;
      height: 100%;
    }

    .companyName {
      padding: 25px 20px 20px 20px;
    }
  }

  .describe {
    padding: 40px 30px 40px 30px;
  }

  .bigTitle {
    margin-bottom: 40px;
    margin-top: 10px;
  }
}
</style>
